<template>
  <el-dialog
    v-model="dialogVisible"
    title="企业结算单管理"
    width="90%" 
    align-center
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="settlement-dialog-content">
      <!-- 企业信息头部 -->
      <div class="enterprise-header">
        <div class="enterprise-info">
          <h3>{{ enterpriseData.shortName || '企业名称' }}</h3>
        </div>
      </div>

      <!-- 标签页内容 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick" class="settlement-tabs">
        <el-tab-pane label="结算单汇总" name="summary">
          <SettlementSummary ref="summaryRef" />
        </el-tab-pane>
        <el-tab-pane label="结算单明细" name="detail">
          <SettlementDetail ref="detailRef" />
        </el-tab-pane>
        <el-tab-pane label="对象费用明细" name="object">
          <ObjectCostDetail ref="objectRef" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import SettlementSummary from './BillTotal.vue'
import SettlementDetail from './BillDetail.vue'
import ObjectCostDetail from './FeeDetail.vue'

// 弹窗显示状态
const dialogVisible = ref(false)

// 当前企业数据
const enterpriseData = ref<any>({})

// 标签页状态
const activeName = ref('summary')

// 子组件引用
const summaryRef = ref()
const detailRef = ref()
const objectRef = ref()

// 打开弹窗
const openDialog = (enterprise: any) => {
  enterpriseData.value = { ...enterprise }
  dialogVisible.value = true
  
  // 等待DOM更新后通知子组件
  nextTick(() => {
    notifyCurrentTab()
  })
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  enterpriseData.value = {}
  activeName.value = 'summary'
}

// 标签页切换
const handleTabClick = (tab: any) => {
  const tabName = tab.props.name
  activeName.value = tabName
  notifyCurrentTab()
}

// 通知当前激活的标签页组件更新数据
const notifyCurrentTab = () => {
  if (!enterpriseData.value.id) return
  
  // 构造企业节点数据格式
  const enterpriseNode = {
    id: enterpriseData.value.id,
    label: enterpriseData.value.shortName,
    type: 'company'
  }
  
  const tabName = activeName.value
  if (tabName === 'summary' && summaryRef.value) {
    summaryRef.value.updateData(enterpriseNode)
  } else if (tabName === 'detail' && detailRef.value) {
    detailRef.value.updateData(enterpriseNode)
  } else if (tabName === 'object' && objectRef.value) {
    objectRef.value.updateData(enterpriseNode)
  }
}

// 暴露方法给父组件
defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
.settlement-dialog-content {
  height: 70vh;
  display: flex;
  flex-direction: column;
}

.enterprise-header {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
  flex-shrink: 0;

  .enterprise-info {
    h3 {
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }

    .info-row {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;

      .info-label {
        font-size: 14px;
        color: #606266;
        font-weight: 500;
      }

      .info-value {
        font-size: 14px;
        color: #303133;
        font-weight: 600;
      }
    }
  }
}

.settlement-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  :deep(.el-tabs__content) {
    flex: 1;
    overflow: hidden;
    padding-top: 16px;

    .el-tab-pane {
      height: 100%;
      overflow: hidden;
    }
  }

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  :deep(.el-tabs__nav-wrap) {
    padding: 0;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

// 确保弹窗内容区域有合适的高度
:deep(.el-dialog__body) {
  padding: 20px;
  height: calc(80vh - 120px);
  overflow: hidden;
}

// 表格容器样式调整
:deep(.settle-manage) {
  height: 100%;
  overflow: hidden;
}
</style>
